<template>
  <div class="stats-bar">
    <div class="stat-item">
      <div class="stat-icon total">{{ stats.total }}</div>
      <div class="stat-info">
        <h3>总项目</h3>
        <p>全部项目</p>
      </div>
    </div>
    <div class="stat-item">
      <div class="stat-icon active">{{ stats.未达标 }}</div>
      <div class="stat-info">
        <h3>未达标</h3>
        <p>需要改进</p>
      </div>
    </div>
    <div class="stat-item">
      <div class="stat-icon completed">{{ stats.已达标 }}</div>
      <div class="stat-info">
        <h3>已达标</h3>
        <p>目标完成</p>
      </div>
    </div>
    <div class="stat-item">
      <div class="stat-icon pending">{{ stats.未开始 }}</div>
      <div class="stat-info">
        <h3>未开始</h3>
        <p>准备阶段</p>
      </div>
    </div>
    <div class="stat-item">
      <div class="stat-icon overdue">{{ stats.逾期 }}</div>
      <div class="stat-info">
        <h3>逾期</h3>
        <p>超期项目</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Stats } from '../types'
import { projectsApi } from '../api/services/projects'

const stats = ref<Stats>({
  total: 0,
  未达标: 0,
  已达标: 0,
  未开始: 0,
  逾期: 0
})

const fetchStats = async () => {
  try {
    // 获取今日日期，格式为 YYYY-MM-DD
    const today = new Date().toISOString().split('T')[0]
    
    // 获取基础统计数据
    const result = await projectsApi.getData()
    
    // 获取逾期项目数据
    const overdueResult = await projectsApi.getList({
      page: 1,
      per_page: 1,
      overdue: today
    })

    if (result.code === 200) {
      stats.value = {
        total: result.data.total_count,
        未达标: result.data.in_progress_count,
        已达标: result.data.completed_count,
        未开始: result.data.pending_count,
        逾期: overdueResult.data.total || 0
      }
    }
  } catch (error) {
    console.error('Failed to fetch stats:', error)
  }
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
.stats-bar {
  background: white;
  padding: 20px 30px;
  display: flex;
  gap: 40px;
  border-bottom: 1px solid #e5e7eb;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.stat-icon.total {
  background: #6366f1;
}

.stat-icon.active {
  background: #10b981;
}

.stat-icon.completed {
  background: #3b82f6;
}

.stat-icon.pending {
  background: #f59e0b;
}

.stat-icon.overdue {
  background: #ef4444;
}

.stat-info h3 {
  font-size: 20px;
  color: #1f2937;
}

.stat-info p {
  font-size: 12px;
  color: #6b7280;
}
</style>